  <!-- 
   show:显示隐藏
   isCity:是否城市选择器
   level:级联选择器的层级 如果没有则是单列选择器
   child:树形机构子级的字段名
   keyName:同u-view的keyName
   value:双向绑定字段  父组件需要.nsyc
      回显时的格式为
        单列:{name:'河南省'}或 '河南省'
        多列:[{name:'河南省'},{name:'郑州市'},{name:'金水区'},] 或 ['河南省','郑州市','金水区'] 
   返回值:单列返回当前选中的item 多列返回数组value
   arr:选择器数据  单列传一维数组  多列传二维数组 级联传一维树形结构 
   -->
  <template>
  	<view :level="level" :child="child">
  		<slot></slot>
  		<u-picker :show="show" :columns="columns" :keyName="keyName" @confirm="confirm" @change="changeHandler"
  			:closeOnClickOverlay="true" @cancel="close" :defaultIndex='defaultIndex'></u-picker>
  	</view>
  </template>

  <script>
  	import city from '@/utils/city.js'
  	export default {
  		name: "c-picker",
  		props: {
  			show: {
  				typeof: Boolean,
  				default: !!0,
  			},
  			isCity: {
  				typeof: Boolean,
  				default: !!0,
  			},
  			arr: {
  				typeof: Array,
  			},
  			keyName: {
  				typeof: String,
  			},
  			value: {
  				typeof: [Object, String, Array],
  			},
  			child: {
  				typeof: String,
  				default: 'child'
  			},
  			level: {
  				typeof: Number,
  				default: 1
  			}
  		},
  		data() {
  			return {
  				isLoad: false,
  				columns: [],
  				defaultIndex: [0],
  			};
  		},
  		mounted() {
  			let columns = []

  			if (this.isCity) { //省市区数据
  				columns[0] = city
  			} else {
  				if (this.arr && this.arr[0] && Array.isArray(this.arr[0])) { //多列数据
  					columns = this.arr
  				} else {
  					columns[0] = this.arr //单列或级联数据的第0项 
  				}
  			}
  			if (this.level > 1) { //级联子级数据
  				for (let i = 1; i < this.level; i++) {
  					columns[i] = columns[i - 1][0][this.child]
  				}
  			}
  			this.columns = columns
  			this.defaultIndex = Array(columns.length || this.level).fill(0)
  			if (this.value) { //回显
  				//单列
  				if (this.level == 1) {
  					let index = this.arr.findIndex(i => i[this.keyName] ? i[this.keyName] === this.value || i[this
  						.keyName] === this.value[this.keyName] : i === this.value)
  					this.defaultIndex = [index]
  				}
  				//级联
  				if (this.level > 1) {
  					if (!this.isArr(this.value)) return
  					for (let i = 0; i < this.level; i++) {
  						let index = this.columns[i].findIndex(j => {
  							return
  							if (j[this.keyName]) {
  								j[this.keyName] === this.value[i] || j[this.keyName] === this.value[i][this
  									.keyName
  								]
  							} else {
  								j === this.value[i]
  							}
  						})
  						this.defaultIndex[i] = index
  						this.changeHandler({
  							columnIndex: i,
  							index
  						})
  					}
  				}
  				//多列
  				if (this.columns.length > 1 && this.level == 1) {
  					for (let i = 0; i < this.columns.length; i++) {
  						let index = this.columns[i].findIndex(j => {
  							return j[this.keyName] ? j[this.keyName] === this.value[i] || j[this.keyName] ===
  								this.value[i][this
  									.keyName
  								] : j === this.value[i]
  						})
  						this.defaultIndex[i] = index
  					}
  					this.$forceUpdate()
  				}
  			}
  		},
  		methods: {
  			isArr(arr) {
  				return Array.isArray(arr) && arr.length > 0
  			},
  			close() {
  				this.$emit('update:show', false)
  			},
  			confirm(e) {
  				if (e.value.length == 1) {
  					this.$emit('update:value', e.value[0])
  				} else {
  					this.$emit('update:value', e.value)
  				}
  				this.close()
  			},
  			changeHandler(e) {
  				if (this.level < 2) return
  				let cIndex = e.columnIndex
  				let index = e.index
  				if (e.indexs) {
  					this.defaultIndex = e.indexs
  				} else {
  					this.defaultIndex[e.columnIndex] = e.index
  				}
  				for (let i = cIndex + 1; i < this.level; i++) {
  					if (i == cIndex + 1) { //子级 
  						this.columns[i] = this.columns[i - 1][index][this.child]
  					} else { //孙子级 默认显示第0项
  						this.columns[i] = this.columns[i - 1][0][this.child]
  					}
  					this.defaultIndex[i] = 0
  				}
  				this.defaultIndex = JSON.parse(JSON.stringify(this.defaultIndex))
  				this.columns = JSON.parse(JSON.stringify(this.columns))
  			}
  		}
  	}
  </script>

  <style>

  </style>